<template>
  <div class="EmergencyList">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/DutyIndex' }">值班管理</el-breadcrumb-item>
        <el-breadcrumb-item>值班统计</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="reset" :form="form" :formData="formList">
      </filterTitle>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table.compRef"
        ref="gjxm" :columns="table.columns" :title="table.title" :actions="table.actions" :tableData="table.tableData"
        :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag"
        :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
  </div>
</template>

<script>
import { formData } from "./config";
import { getAttendanceListApi, onExportApi } from "@/api/duty/daily/dutyStatistics.js";
import { getUntilList } from "@/api/common.js";
import common from "@/utils/common.js";
import moment from "moment";
export default {
  name: "DutyStatisticsList",
  components: {},
  data() {
    return {
      statuss: 0, // 0日 1周 2月 3年
      form: {
        unitName: "",
        value0: "",
        value1: "",
        value2: "",
        value3: ""
      },
      // formInline: {
      //   user: "",
      //   region: ""
      // },
      // 筛选信息
      formData,
      formList: formData,
      // 表格信息
      table: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "考勤统计列表",
        actions: [
          {
            id: "onExport",
            text: "导出",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        // tableData: [{
        //   unitName: "国网湖北省电力有限公司",
        //   planLCount: "124",
        //   presentCount: "122",
        //   lateCount: "5",
        //   excusedCount: "2",
        //   absentCount: "2",
        //   holidayCount: "1",
        //   normalRate: "91.9%",
        //   replaceCount: "1"
        // }],
        columns: [
          {
            prop: "unitName",
            label: "所属单位",
            align: "center",
            "min-width": "200px"
          },
          {
            prop: "planLCount",
            label: "计划值班人次",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "presentCount",
            label: "实际值班人次",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "lateCount",
            label: "迟到人次",
            align: "center",
            "min-width": "120px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                      {...{
                        on: {
                          click: () => {
                            this.lateDetail(row);
                          }
                        }
                      }}
                    >
                      {row.lateCount}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "excusedCount",
            label: "早退人次",
            align: "center",
            "min-width": "120px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                      {...{
                        on: {
                          click: () => {
                            this.earlyDetail(row);
                          }
                        }
                      }}
                    >
                      {row.excusedCount}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "absentCount",
            label: "缺勤人次",
            align: "center",
            "min-width": "120px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                      {...{
                        on: {
                          click: () => {
                            this.absenceDetail(row);
                          }
                        }
                      }}
                    >
                      {row.absentCount}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "holidayCount",
            label: "请假人次",
            align: "center",
            "min-width": "120px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                      {...{
                        on: {
                          click: () => {
                            this.leaveDetail(row);
                          }
                        }
                      }}
                    >
                      {row.holidayCount}
                    </span>
                  }
                </div>
              );
            }

          },
          {
            prop: "normalRate",
            label: "正常考勤率",
            align: "center",
            "min-width": "120px"

          },
          {
            prop: "replaceCount",
            label: "未及时接班次数",
            align: "center",
            "min-width": "120px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                      {...{
                        on: {
                          click: () => {
                            this.notInTimeDetail(row);
                          }
                        }
                      }}
                    >
                      {row.replaceCount}
                    </span>
                  }
                </div>
              );
            }
          }
        ],
        tableAttr: {
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": false,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
      },
      pageNum: 1,
      pageSize: 10,
      dept_options: [],
      statisticsStart: "",
      statisticsEnd: "",
      defaultDayStart: (new Date(new Date().setHours(0, 0, 0))).toLocaleString("zh", { hour12: false }).replaceAll("/", "-"),
      defaultDayEnd: (new Date(new Date().setHours(23, 59, 59, 999))).toLocaleString("zh", { hour12: false }).replaceAll("/", "-"),
      defaultWeekStart: (new Date(new Date().setHours(0, 0, 0) - (new Date().getDay()) * 8.64e7)).toLocaleString("zh", { hour12: false }).replaceAll("/", "-"),
      defaultMonthStart: (new Date(new Date(new Date().getFullYear(), new Date().getMonth(), 1).setHours(0, 0, 0))).toLocaleString("zh", { hour12: false }).replaceAll("/", "-"),
      defaultYearStart: (new Date(new Date(new Date().getFullYear(), new Date().getMonth(), 1).setHours(0, 0, 0))).toLocaleString("zh", { hour12: false }).replaceAll("/", "-")
    };
  },
  watch: {
    "$route.query.dateInfoStatus": {
      handler(val) {
        this.addForm(val);
        this.list();
      }
    }
  },
  mounted() {
    this.getUnitTree();
    this.addForm(this.$route.query.dateInfoStatus);
    this.list();
  },
  methods: {
    addForm(val) {
      this.formList = JSON.parse(JSON.stringify(formData));
      switch (val) {
        case "0":
          this.formList.push({
            elType: "dateTimePicker",
            id: "releaseStartTime",
            label: "统计日期",
            attrs: {
              value: "",
              size: "medium",
              type: "datetimerange",
              clearable: true,
              "start-placeholder": "开始日期",
              "end-placeholder": "结束日期",
              "format": "yyyy-MM-dd",
              "value-format": "yyyy-MM-dd"
            }
          });
          break;
        case "1":
          this.formList.push(
            {
              elType: "dateTimePicker",
              id: "releaseTime",
              label: "统计周数",
              attrs: {
                value: "",
                size: "medium",
                clearable: true,
                type: "week",
                "format": "第 WW 周",
                "value-format": "yyyy-MM-dd"
              }
            });
          break;
        case "2":
          this.formList.push(
            {
              elType: "dateTimePicker",
              id: "releaseTime",
              label: "统计月份",
              attrs: {
                value: "",
                size: "medium",
                clearable: true,
                type: "month",
                "format": "yyyy年MM月",
                "value-format": "yyyy-MM-dd"
              }
            }
          );
          break;
        case "3":
          this.formList.push(
            {
              elType: "dateTimePicker",
              id: "releaseTime",
              label: "统计年份",
              attrs: {
                value: "",
                size: "medium",
                clearable: true,
                type: "year",
                "format": "yyyy年",
                "value-format": "yyyy-MM-dd"
              }
            }
          );
          break;

        default:
          break;
      }
    },
    // 组织树
    async getUnitTree() {
      const orgId = JSON.parse(sessionStorage.org).orgId;
      const res = await getUntilList({ orgId });
      if (res) {
        this.formList[0].treeData.attrs.data = res;
      }
    },
    // 树状选择
    deptChoose(val, item) {
      if (item.label == "所属单位") {
        this.$set(this.form, "unitName", val[0].orgName);
      }
    },
    // 重置
    reset() {
      this.form = this.$options.data().form;
      this.list();
    },
    // 检索
    async query() {
      this.list();
    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      this.list();
    },
    // 抛出列表按钮
    onActionClick(item, index) {
      this[item.id](); // 调用按钮对应方法
    },
    // 导出操作
    onExport() {
      onExportApi({ belongUnitName: this.form.unitName, startTime: this.statisticsStart, endTime: this.statisticsEnd }).then(res => {
        common.downloadByBlob(res, `考勤统计日期列表${new Date().getTime()}.xlsx`);
      });
    },
    // 列表
    list() {
      this.statuss = this.$route.query.dateInfoStatus;

      if (this.form.releaseStartTime || this.form.releaseTime) {
        if (this.statuss == 0) {
          this.statisticsStart = this.form.releaseStartTime[0];
          this.statisticsEnd = this.form.releaseStartTime[1];
        } else if (this.statuss == 1) {
          this.statisticsStart = moment(this.form.releaseTime).isoWeekday(0).format("YYYY-MM-DD");
          this.statisticsEnd = moment(this.form.releaseTime).isoWeekday(6).format("YYYY-MM-DD");
        } else if (this.statuss == 2) {
          this.statisticsStart = moment().month(moment(this.form.releaseTime).month()).startOf("month").format("YYYY-MM-DD");
          this.statisticsEnd = moment().month(moment(this.form.releaseTime).month()).endOf("month").format("YYYY-MM-DD"); // moment(this.form.releaseTime).format("YYYY-MM-DD");
        } else if (this.statuss == 3) {
          this.statisticsStart = moment(this.form.releaseTime).month(0).format("YYYY-MM-DD");
          this.statisticsEnd = moment(this.form.releaseTime).month(11).endOf("months").format("YYYY-MM-DD");
        }
      } else {
        // 第一次进页面
        if (this.statuss == 0) {
          this.statisticsStart = this.defaultDayStart;
          this.statisticsEnd = this.form.defaultDayEnd;
        } else if (this.statuss == 1) {
          this.statisticsStart = moment().isoWeekday(0).format("YYYY-MM-DD");
          this.statisticsEnd = moment().isoWeekday(6).format("YYYY-MM-DD");
          console.log(this.statisticsStart);
        } else if (this.statuss == 2) {
          this.statisticsStart = moment().month(moment().month()).startOf("month").format("YYYY-MM-DD");
          this.statisticsEnd = moment().month(moment().month()).endOf("month").format("YYYY-MM-DD");
        } else if (this.statuss == 3) {
          this.statisticsStart = moment().month(0).format("YYYY-MM-DD");
          this.statisticsEnd = moment().month(11).endOf("months").format("YYYY-MM-DD");
        }
      }
      const params = {
        unitName: this.form.unitName,
        startTime: this.statisticsStart,
        endTime: this.statisticsEnd,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      getAttendanceListApi(params).then(res => {
        this.table.tableData = res.data;
        this.paginationAtrrs.total = res.total;
      });

    },
    dailyChange() {
      if (this.statuss == 0) {
        const dayStart = (this.form.value0[0]).toLocaleString("zh", { hour12: false }).replaceAll("/", "-");
        const dayEnd = (new Date(this.form.value0[1].setHours(23, 59, 59, 59))).toLocaleString("zh", { hour12: false }).replaceAll("/", "-");
        this.statisticsStart = dayStart;
        this.statisticsEnd = dayEnd;

      } else if (this.statuss == 1) {
        const weekStart = (new Date(this.form.value1.setHours(0, 0, 0) - (this.form.value1.getDay()) * 8.64e7)).toLocaleString("zh", { hour12: false }).replaceAll("/", "-");
        const weekEnd = (new Date(this.form.value1.setHours(0, 0, 0) + (7 - this.form.value1.getDay()) * 8.64e7 - 1)).toLocaleString("zh", { hour12: false }).replaceAll("/", "-");
        this.statisticsStart = weekStart;
        this.statisticsEnd = weekEnd;

      } else if (this.statuss == 2) {
        const monthStart = (this.form.value2).toLocaleString("zh", { hour12: false }).replaceAll("/", "-");
        const monthEnd = (new Date(new Date(this.form.value2.getFullYear(), this.form.value2.getMonth() + 1, 0).setHours(23, 59, 59, 59))).toLocaleString("zh", { hour12: false }).replaceAll("/", "-");
        this.statisticsStart = monthStart;
        this.statisticsEnd = monthEnd;

      } else if (this.statuss == 3) {
        const yearStart = (this.form.value3).toLocaleString("zh", { hour12: false }).replaceAll("/", "-");
        const yearEnd = (new Date(new Date(this.form.value3.getFullYear() + 1, this.form.value3.getMonth(), 0).setHours(23, 59, 59, 59))).toLocaleString("zh", { hour12: false }).replaceAll("/", "-");
        this.statisticsStart = yearStart;
        this.statisticsEnd = yearEnd;

      }

    },


    // 跳转迟到人员统计明细列表
    lateDetail(row) {
      this.$router.push({
        path: "/DutyStatisticsDetail",
        query: {
          id: row.id,
          detailStatus: 0,
          startTime: this.statisticsStart,
          endTime: this.statisticsEnd,
          // unitName: this.form.unitNam
          unitName: row.unitName
        }
      });
    },
    // 跳转早退人员统计明细列表
    earlyDetail(row) {
      this.$router.push({
        path: "/DutyStatisticsDetail",
        query: {
          id: row.id,
          detailStatus: 1,
          startTime: this.statisticsStart,
          endTime: this.statisticsEnd,
          // unitName: this.form.unitName
          unitName: row.unitName
        }
      });
    },
    // 跳转缺勤人员统计明细列表
    absenceDetail(row) {
      this.$router.push({
        path: "/DutyStatisticsDetail",
        query: {
          id: row.id,
          detailStatus: 2,
          startTime: this.statisticsStart,
          endTime: this.statisticsEnd,
          // unitName: this.form.unitName
          unitName: row.unitName
        }
      });
    },
    // 跳转请假人员统计明细列表
    leaveDetail(row) {
      this.$router.push({
        path: "/DutyStatisticsDetail",
        query: {
          id: row.id,
          detailStatus: 3,
          startTime: this.statisticsStart,
          endTime: this.statisticsEnd,
          // unitName: this.form.uni
          unitName: row.unitName
        }
      });
    },
    // 跳转未及时接班统计明细列表
    notInTimeDetail(row) {
      this.$router.push({
        path: "/DutyStatisticsDetail",
        query: {
          id: row.id,
          detailStatus: 4,
          startTime: this.statisticsStart,
          endTime: this.statisticsEnd,
          // unitName: this.form.unitName
          unitName: row.unitName
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
//@import "../../../../assets/style/ComponentStyle.less";

:deep(.el-table th.el-table__cell > .cell) {
  padding-left: 0;
  padding-right: 0;
}

:deep(.el-breadcrumb) {
  font-size: 16px;
}

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
  font-size: 16px;
}

.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
  font-size: 16px;
}

.box {
  // margin-top: 20px;
  // background-color: #fff;
  // border-radius: 4px;
  // padding: 10px;
  // box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;

  :deep(.el-form-item__label) {
    font-size: 16px !important;
    font-family: "Microsoft YaHei UI";
  }

  :deep(.el-button--small) {
    font-size: 16px;
  }

  :deep(.el-button--mini) {
    font-size: 16px;
  }
}
</style>
